<template>
  <div class="welfate-center-tabs">
    <div class="tab-head">
      <div
        class="tab-title"
        :class="{ active: modelValue == item?.props?.name }"
        v-for="(item, index) in tabs"
        :key="index"
        @click="onChangeTab($event, item, index)"
      >
        {{ item?.props?.label }}
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, ref } from "vue";

export default defineComponent({
  name: "Tabs",
  components: {},
  props: {
    modelValue: [Number, String],
  },
  setup(props, { slots, emit }) {
    // @ts-ignore
    const tabs = slots.default();
    const activeKey = ref(props.modelValue);
    provide("activeKey", activeKey);

    function onChangeTab(event, tab, index) {
      activeKey.value = tab.props.name;
      emit("update:modelValue", tab.props.name);
    }

    return {
      tabs,
      onChangeTab,
    };
  },
});
</script>

<style lang="scss" scoped>
.welfate-center-tabs {
  width: 718px;
  height: 563px;
  background-color: #211656;

  .tab-head {
    display: flex;
  }

  .tab-content {
    width: 100%;
    height: 517px;
  }

  .tab-title {
    width: 176px;
    height: 46px;
    line-height: 46px;
    background: #8e7eed;
    opacity: 0.5;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-right: 5px;
    position: relative;
    cursor: pointer;
  }

  & .tab-title:first-child {
    background: transparent;
    background-image: url(@/static/img/welfare/tab1.png);
  }

  & .tab-title:last-child {
    margin-right: 0;
  }

  .active {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  .welfate-center-tabs {
    width: 100%;
    height: auto;
    background: none;

    .tab-head {
      align-items: center;
      justify-content: center;
    }

    .tab-content {
      height: auto;
      padding-top: 10px;
    }

    .tab-title {
      width: 84px;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      background-color: #21155f;
      border-radius: 5px;
      color: #d3c7ff;
    }

    & .tab-title:first-child {
      background-image: none;
      background-color: #21155f;
    }

    & .tab-title:last-child {
      margin-right: 0;
    }

    .active {
      color: #ffea00;
      opacity: 1;
      background-image: url(@/static/img/welfare/bg_mobile_tab_active.png) !important;
      background-size: 100% !important;
    }
  }
}
</style>